Parent | Child | Previous | Next
 

List ObjecttwoStateImageSet Method

Syntax

listObj.twoStateImageSet(staticImageFieldName, state [, row]);

Arguments

staticImageFieldNamestring

The name of the static image. If the name is blank (i.e. ''), then the action applies to the system <Row Open/Close Indicator> column.

statestring

The image state. Can be set to 'on' or 'off'. A blank value (i.e. '') sets the image state to 'off'.

rownumber

Logical row number that contains the two-state image to set. If not specified, the action applies to all rows in the List.

Description

Sets the toggled state of a two-value image or the List's <Row Open/Close Indicator> icon.

Discussion

The twoStateImageSet() method sets the state for a two-state image. A two-state image is a Static Image control that has the Two-state image property enabled.

This method can also be used to set the state for a List with a Detail View that is configured to display a Detail View or other content embedded in the List row.

var listObj = {dialog.object}.getControl('LIST1');

if (listObj) {

    // Set the state of 'IMG1' to on in all List Rows
    listObj.twoStateImageSet('IMG1','on');

    // Set the state of 'IMG1' to off in all List Rows
    listObj.twoStateImageSet('IMG1','off');

    // Set the state of 'IMG1' to on in row 3 of the List
    listObj.twoStateImageSet('IMG1','on', 2);

    // Set the state of the Row Open/Close Indicator to on for all rows
    listObj.twoStateImageSet('','on');

}

Videos

Two-state images

A common design pattern when building user interfaces is to add icons that change with animation when the icon is clicked. For example, you might have a 'hamburger' icon that displays a menu. When the icon is clicked, you might want the icon to animate into an different icon (i.e. an 'X' icon) to indicate clicking the icon closes the menu.

In this video, we show how to create animated two-state images in a List.

Download Component

03-06-2021

See Also